<template>
  <div class="container">
    <header>
      <el-card>BP二手房房价预测</el-card>
    </header>
    <main>
      <el-card class="left">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="室数">
            <el-input placeholder="请输入室数" v-model="form.rooms" />
          </el-form-item>
          <el-form-item label="厅数">
            <el-input placeholder="请输入厅数" v-model="form.halls" />
          </el-form-item>
          <el-form-item label="面积">
            <el-input placeholder="请输入面积" v-model="form.area" />
          </el-form-item>
          <el-form-item label="关注人数">
            <el-input
              placeholder="请输入关注人数"
              v-model="form.follow_number"
            />
          </el-form-item>
          <el-form-item label="关注人数">
            <el-select
              v-model="form.city_name"
              placeholder="请输入城市"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="button">
            <el-button type="primary" plain @click="commit">开始预测</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="right">
        <h1>预测后的信息</h1>
        <div class="item">
          <p>
            当前预测的城市：
            <span>{{ city_name }}</span>
          </p>
        </div>
        <div class="item">
          <p>
            该城市的二手房均价为
            <span>{{ predicted_price }}</span>
            元/㎡
          </p>
        </div>
      </el-card>
    </main>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElNotification } from 'element-plus'
import { reqPredictAPI } from '@/api/predict/index'

const form = reactive({
  rooms: '',
  halls: '',
  area: '',
  follow_number: '',
  city_name: '',
})
const options = [
  {
    value: '北京',
    label: '北京',
  },
  {
    value: '上海',
    label: '上海',
  },
  {
    value: '广州',
    label: '广州',
  },
  {
    value: '深圳',
    label: '深圳',
  },
  {
    value: '武汉',
    label: '武汉',
  },
  {
    value: '重庆',
    label: '重庆',
  },
  {
    value: '南京',
    label: '南京',
  },
  {
    value: '西安',
    label: '西安',
  },
  {
    value: '天津',
    label: '天津',
  },
  {
    value: '佛山',
    label: '佛山',
  },
  {
    value: '无锡',
    label: '无锡',
  },
  {
    value: '长沙',
    label: '长沙',
  },
  {
    value: '郑州',
    label: '郑州',
  },
  {
    value: '青岛',
    label: '青岛',
  },
  {
    value: '东莞',
    label: '东莞',
  },
]
const city_name = ref<string>('')
const predicted_price = ref<number>(0)
const commit = async () => {
  let res = await reqPredictAPI(form)
  if (res.code === 200) {
    ElNotification({
      type: 'success',
      message: res.msg,
    })
    city_name.value = res.data.city_name
    predicted_price.value = res.data.predicted_price
  }
  reset() // 清空表单
}
const reset = () => {
  for (let key in form) {
    form[key] = ''
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  header {
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  main {
    height: 100%;
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 70px);
    display: flex;

    h1 {
      font-size: 25px;
      font-family: 'SimSun';
      text-align: center;
      font-weight: bold;
    }
    .left {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .button {
        margin-left: 40px;
        margin-top: 50px;
        .el-button {
          border-radius: 50px;
          width: 200px;
        }
      }
    }
    .right {
      flex: 1;
      .item {
        margin: 100px auto;
        color: #238e68;
        font-size: 20px;
        font-family: 'SimSun';
        font-weight: bold;
        span {
          color: #bc1717;
        }
      }
    }
  }
}
</style>
